<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="./favicon.ico" />
    <title>loading...</title>
    <link rel="stylesheet" href="dist/styles/iview.css">
    <style>
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
            position: relative;
        }
        
        .content {
            box-sizing: border-box;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div id="container">
        <Layout style="height:100%;">
            <i-Header>
                <Row style="height: 100%;">
                    <i-col :span="12" style="color:#ffffff;">
                        <h1>{{isZh ? '消息列表' :'Message List'}}</h1>
                    </i-col>
                    <i-col :span="12" style="text-align:right;">
                        <i-button @click="jumpSendMsg" type="primary">{{isZh ? '发送消息' :'Send Message'}}</i-button>
                    </i-col>
                </Row>
            </i-Header>
            <i-Content class="content">
                <i-table border :columns="columns" :data="data"></i-table>
            </i-Content>
        </Layout>
    </div>
    <script src="js/polyfill.min.js"></script>
    <script src="dist/vue.min.js"></script>
    <script src="dist/iview.min.js"></script>
    <script src="js/zh-CN.js"></script>
    <script src="js/en-US.js"></script>
    <script src="js/gps51-jquery.js"></script>
    <script src="js/config.js"></script>
    <script src="js/dateformat.js"></script>
    <script src="js/js.cookie.min.js"></script>
    <script src="js/util.js"></script>
    <script>
        var token = utils.getParameterByName("token");
        var timeDifference = DateFormat.getOffset();
        var userName = localStorage.getItem('name');
        var isZh = utils.locale === 'zh';
        document.title = isZh ? '消息' : 'Message';
        iview.lang(isZh ? 'zh-CN' : 'en-US');
        var vRoot = new Vue({
            el: '#container',
            data: {
                isZh: isZh,
                columns: [{
                    title: isZh ? '用户名' : 'User name',
                    key: 'createraccount',
                    width: 200,
                }, {
                    title: isZh ? '发送者名称' : 'Sender',
                    key: 'creatername',
                    width: 200,
                }, {
                    title: isZh ? '发送时间' : 'Send time',
                    key: 'createtimeStr',
                    width: 160,
                }, {
                    title: isZh ? '内容' : 'Content',
                    key: 'content'
                }, {
                    title: isZh ? '操作' : 'Action',
                    type: 'action',
                    width: 170,
                    render: function(h, params) {
                        var row = params.row;
                        var disabled = !(row.createraccount == userName);
                        return h('div', [
                            h('Poptip', {
                                props: {
                                    confirm: true,
                                    title: isZh ? '确定删除吗?' : 'Are you sure you want to delete it'
                                },
                                style: {
                                    marginRight: '10px'
                                },
                                on: {
                                    'on-ok': function() {
                                        vRoot.deleteSystemMsg(row.systemmsgid, params.index);
                                    }
                                }
                            }, [
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    }
                                }, isZh ? "删除" : "delete")
                            ]),
                            h('Poptip', {
                                props: {
                                    confirm: true,
                                    title: isZh ? '确定撤回吗?' : 'Are you sure you want to withdraw'
                                },
                                style: {

                                },
                                on: {
                                    'on-ok': function() {
                                        vRoot.recallSystemMsg(row.systemmsgid, row.systemmsguuid, params.index);
                                    }
                                }
                            }, [
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small',
                                        disabled: disabled
                                    }
                                }, isZh ? "撤回" : "withdraw")
                            ]),
                        ])
                    }
                }, ],
                data: [],
            },
            methods: {
                getSystemMsg: function() {
                    var url = myUrls.querySystemMsg(),
                        me = this;
                    utils.sendAjax(url, {
                        username: userName
                    }, function(resp) {
                        if (resp.status === 0) {
                            resp.records.forEach(function(record) {
                                record.createtimeStr = DateFormat.longToLocalDateTimeStr(record.createtime)
                            })
                            me.data = resp.records;
                        };
                    });
                },
                jumpSendMsg: function() {
                    open('sendmsg.html?token=' + token);
                },
                deleteSystemMsg: function(systemmsgid, index) {
                    var url = myUrls.deleteSystemMsg(),
                        me = this;
                    utils.sendAjax(url, {
                        systemmsgid: systemmsgid
                    }, function(resp) {
                        if (resp.status == 0) {
                            me.data.splice(index, 1);
                            me.$Message.success(isZh ? "删除成功" : "Deletion succeeded");
                        } else {
                            me.$Message.error(isZh ? "删除失败" : "Deletion failed");
                        }
                    });
                },
                recallSystemMsg: function(systemmsgid, systemmsguuid, index) {
                    var url = myUrls.recallSystemMsg(),
                        me = this;
                    utils.sendAjax(url, {
                        systemmsgid: systemmsgid,
                        systemmsguuid: systemmsguuid
                    }, function(resp) {
                        if (resp.status == 0) {
                            me.data.splice(index, 1);
                            me.$Message.success(isZh ? "撤回成功" : "Withdrawal successful");
                        } else {
                            me.$Message.error(isZh ? "撤回失败" : "Withdrawal failed");
                        }
                    })
                }
            },
            mounted: function() {
                this.getSystemMsg();
            },
        })
    </script>
</body>

</html>